<template>
  <div>
    <div class="wrap">
      <div class="container">
        <div class="reg-box">
          <div class="reg-box-wrap">
            <h2 class="title">账号登录</h2>
            <div class="reg-tabs">
              <div
                :class="num == 1 ? 'active' : ''"
                @click="setNum(1)"
                class="reg-tabs-item"
                style="margin-right: 40px"
              >
                密码登录
              </div>
              <div
                :class="num == 2 ? 'active' : ''"
                @click="setNum(2)"
                class="reg-tabs-item"
              >
                短信登录
              </div>
            </div>
            <div class="reg-form-warp">
              <DynamicForm
                ref="ruleFormRef"
                v-show="num === 1"
                :model="ruleForm1"
                :formData="ruleForm1"
                :rules="rules"
                :path="path"
                :fields="accountFields"
                class="reg-form"
                @submit="handleSubmit1"
              ></DynamicForm>

              <DynamicForm
                ref="ruleFormRef"
                v-show="num === 2"
                :model="ruleForm2"
                :formData="ruleForm2"
                :rules="rules"
                :path="path"
                :fields="phoneFields"
                class="reg-form"
                @submit="handleSubmit2"
              ></DynamicForm>
            </div>
            <div class="reg-tips" v-show="path === '/register'">
              已有账号？<span
                class="login-btn"
                style="color: #dd3a5f; cursor: pointer"
                >登录</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Lock, Iphone, Cellphone } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

import DynamicForm from '@/components/common/DynamicForm.vue'

import { useRoute } from 'vue-router'
import { loginByJson } from '@/api/login'
import { encrypt } from '@/utils/aes'
import CountDown from '@/components/common/CountDown.vue'

let route = useRoute()

let path = route.path as string

//console.log(path)

let num = ref(1)

// 代码优化，num 的值只允许为 1 或 2，但代码中没有对非法值进行处理
const setNum = (value: number) => {
  if ([1, 2].includes(value)) {
    num.value = value
  } else {
    console.error('非法的 num 值:', value)
  }
}

//表单数据ts类型
interface RuleForm {
  phone?: string
  password?: string
  accountName?: string
  verificationCode?: string
}

// 表单数据,1为密码登录，2为短信登录
const ruleForm1 = reactive<RuleForm>({
  accountName: '', // 账号名称
  password: '' // 密码
})

// 表单数据,1为密码登录，2为短信登录
const ruleForm2 = reactive<RuleForm>({
  phone: '', // 手机号
  verificationCode: '' // 验证码
})

// 字段配置
// 短信登录表单配置
const phoneFields = [
  { prop: 'phone', placeholder: '(+86) 请输入手机号码', icon: Iphone },
  {
    prop: 'verificationCode',
    placeholder: '请输入验证码',
    icon: Cellphone,
    getCode: () => console.log('发送验证码')
  }
]

// 账号登录表单配置
const accountFields = [
  { prop: 'accountName', placeholder: '请输入账号名称', icon: User },
  {
    prop: 'password',
    placeholder: '请输入密码',
    icon: Lock,
    type: 'password',
    showPassword: true
  }
]

// 表单验证规则
const rules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6到20位之间', trigger: 'blur' }
  ],
  accountName: [
    { required: true, message: '请输入账号名称', trigger: 'blur' },
    { min: 3, max: 20, message: '账号名称长度应在3到20位之间', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码应为6位数字', trigger: 'blur' }
  ]
})

// 提交表单数据
// const handleSubmit1 = (formData: any) => {
//   console.log('传递给父组件的数据', formData)
//   // console.log('提交表单数据:', ruleForm)
// }

console.log('path', path)

// 提交表单数据 1为密码登录，2为短信登录
const handleSubmit1 = async (formData: any) => {
  console.log('formData.accountName', encrypt(formData.accountName))
  console.log('formData.password', encrypt(formData.password))
  try {
    // const res = await loginByJson({
    //   username: encrypt(formData.accountName),
    //   password: encrypt(formData.password)
    // })
    //  console.log('登录返回的数据', res)

    const res = await loginByJson({
      username: encrypt(formData.accountName),
      password: encrypt(formData.password)
    })

    console.log('登录返回的数据', res)
  } catch (error) {
    console.error('登录失败', error)
  }

  // console.log('提交表单数据:', ruleForm)
}

// 提交表单数据 1为密码登录，2为短信登录
const handleSubmit2 = (formData: any) => {
  console.log('传递给父组件的数据', formData)
  // console.log('提交表单数据:', ruleForm)
}
</script>

<style scoped>
.wrap {
  min-width: 600px;
  height: 100vh;
  min-height: 929px;
  background: #f7fafe;
  position: relative;
  display: flex;
  overflow-y: auto;
  .container {
    height: 100%;
    flex: 1;
    position: relative;
    background-image: url(//res.orayimg.com/oray-login/1.0/img/login-bg.9c3e2f2.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-color: #f7fbff;
    .reg-box {
      border: 2px solid #fff;
      background: hsla(0, 0%, 100%, 0.6);
      border-radius: 8px;
      box-shadow: 0 4px 50px rgba(87, 126, 255, 0.04);
      backdrop-filter: blur(10px);
      min-width: 440px;
      position: absolute;
      top: calc(40% - 278.4px);
      left: 50%;
      transform: translateX(-50%);
      .reg-box-wrap {
        position: relative;
        padding: 60px 40px 0;
        .title {
          font-size: 24px;
          line-height: 32px;
          color: #1d2129;
          font-weight: 550;
        }
        .reg-tabs {
          margin-top: 32px;
          display: flex;
          color: #1d2129;
          .reg-tabs-item {
            cursor: pointer;
            padding-bottom: 8px;
            border-bottom: 2px solid transparent;
            font-size: 16px;
            line-height: 21px;
            &.active {
              color: #3773f5;
              border-bottom-color: #3773f5;
              font-weight: 550;
            }
          }
        }
        .reg-form-warp {
          margin-top: 24px;
        }
        .reg-tips {
          padding-bottom: 58px;
          display: flex;
          flex-direction: row;
          justify-content: end;
        }
      }
    }
  }
}
</style>
